<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #root button {
            padding: 5px;
            margin: 5px;
        }

        #root button.active {
            background: red;
        }

        #root div {
            width: 500px;
            height: 200px;
            background: green;
        }
    </style>
</head>

<body>
    <div id="root">
        <button>中国</button>
        <button>日本</button>
        <button>韩国</button>
        <div>中国新闻</div>
        <div>日本新闻</div>
        <div>韩国新闻</div>
    </div>
    <script>
        // const btns = document.querySelectorAll("#root button");
        // const divs = document.querySelectorAll("#root div");
        // // 选中的下标初始值
        // let index = 0;
        // for (let i = 0; i < btns.length; i++) {
        //     btns[i].onclick = function () {
        //         // 移除选中按钮的样式
        //         btns[index].className = null;
        //         divs[index].style.display = "none";
        //         index = i;
        //         btns[index].className = "active";
        //         divs[index].style.display = "block";
        //     }
        //     divs[i].style.display = "none";
        // }
        // btns[index].className = "active";
        // divs[index].style.display = "block";


        // 优化一
        // const btns = document.querySelectorAll("#root button");
        // const divs = document.querySelectorAll("#root div");

        // let index = 0;

        // init();

        // function init() {
        //     for (let i = 0; i < btns.length; i++) {
        //         btns[i].onclick = () => {
        //             hide();
        //             index = i;
        //             show();
        //         }
        //         divs[i].style.display = 'none';
        //     }
        //     show();
        // }

        // function hide() {
        //     btns[index].className = null;
        //     divs[index].style.display = "none";
        // }

        // function show() {
        //     btns[index].className = 'active';
        //     divs[index].style.display = "block";
        // }


        // 优化二: 构造函数:将面向过程中定义的变量或常量作为实例属性，方法作为原型方法
        // function Tab() {
        //     this.btns = document.querySelectorAll("#root button");
        //     this.divs = document.querySelectorAll("#root div");
        //     this.index = 0; // 选中的下标初始值
        //     this.init();
        // }
        // Object.assign(Tab.prototype, {
        //     init() {
        //         for (let i = 0; i < this.btns.length; i++) {
        //             this.btns[i].onclick = function () {
        //                 this.hide();
        //                 this.index = i;
        //                 this.show();
        //             }.bind(this)
        //             this.divs[i].style.display = "none";
        //         }
        //         this.show();
        //     },
        //     hide() {
        //         this.btns[this.index].className = null; // 移除选中按钮的样式
        //         this.divs[this.index].style.display = "none";
        //     },
        //     show() {
        //         this.btns[this.index].className = "active";
        //         this.divs[this.index].style.display = "block";
        //     }
        // })
        // new Tab();



        // 优化三: class
        class Tab {
            constructor() {
                this.btns = document.querySelectorAll("#root button");
                this.divs = document.querySelectorAll("#root div");
                this.index = 0; // 选中的下标初始值
                this.init();
            }
            init() {
                for (let i = 0; i < this.btns.length; i++) {
                    this.btns[i].onclick = function () {
                        this.hide();
                        this.index = i;
                        this.show();
                    }.bind(this)
                    this.divs[i].style.display = "none";
                }
                this.show();
            }
            hide() {
                this.btns[this.index].className = null; // 移除选中按钮的样式
                this.divs[this.index].style.display = "none";
            }
            show() {
                this.btns[this.index].className = "active";
                this.divs[this.index].style.display = "block";
            }

        }
        new Tab();
    </script>
</body>

</html>